<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">

    <link rel="stylesheet" href="./assets/css/animate.min.css">

    <link rel="stylesheet/less" href="./assets/css/reset.less">

    <link rel="stylesheet/less" href="./assets/css/common.less">

    <link rel="stylesheet/less" href="./assets/css/explore.less">

</head>
<body>
    <header>
        <p>探索</p>
        <input type="radio" name="chks" id="chk" checked>
        <label for="chk" id="duo"></label>
        <input type="radio" name="chks" id="chk1" >
        <label for="chk1" id="dan"></label>
    </header>

    <div class="boxe">
        <div class="boxs">
            <img src="./assets/images/bigfm_01.png">
            <p>三体：死神永生</p>
        </div>
        <div class="boxs">
            <img src="./assets/images/bigfm_02.png">
            <p>百年孤独</p>
        </div>
        <div class="boxs">
            <img src="./assets/images/bigfm_03.png">
            <p>平凡的世界</p>
        </div>
        <div class="boxs">
            <img src="./assets/images/bigfm_04.png">
            <p>未来简史</p>
        </div>
    </div>

    <div class="boxe1">
        <div class="boxs">
            <img src="./assets/images/bigfm_01.png">
            <p>三体：死神永生</p>
            <p>刘慈心</p>
            <div class="imgs">
                <img src="./assets/images/explore-tp_01.png">
                <img src="./assets/images/explore-tp_02.png">
                <img src="./assets/images/explore-tp_03.png">
                <img src="./assets/images/explore-tp_04.png">
            </div>
            <p>457人已订阅</p>
        </div>
        <div class="sidebox">
            <div class="side">
                <img src="./assets/images/explore-tp_05.png">
                <div class="text">
                    <p>陈小东</p>
                    <p>推荐</p>
                </div>
            </div>
        </div>
        <div class="boxs">
            <img src="./assets/images/bigfm_01.png">
            <p>三体：死神永生</p>
            <p>刘慈心</p>
            <div class="imgs">
                <img src="./assets/images/explore-tp_01.png">
                <img src="./assets/images/explore-tp_02.png">
                <img src="./assets/images/explore-tp_03.png">
                <img src="./assets/images/explore-tp_04.png">
            </div>
            <p>457人已订阅</p>
        </div>
        <div class="sidebox">
            <div class="side">
                <img src="./assets/images/explore-tp_05.png">
                <div class="text">
                    <p>陈小东</p>
                    <p>推荐</p>
                </div>
            </div>
        </div>
        <div class="boxs">
            <img src="./assets/images/bigfm_01.png">
            <p>三体：死神永生</p>
            <p>刘慈心</p>
            <div class="imgs">
                <img src="./assets/images/explore-tp_01.png">
                <img src="./assets/images/explore-tp_02.png">
                <img src="./assets/images/explore-tp_03.png">
                <img src="./assets/images/explore-tp_04.png">
            </div>
            <p>457人已订阅</p>
        </div>
        <div class="sidebox">
            <div class="side">
                <img src="./assets/images/explore-tp_05.png">
                <div class="text">
                    <p>陈小东</p>
                    <p>推荐</p>
                </div>
            </div>
        </div>
        <div class="boxs">
            <img src="./assets/images/bigfm_01.png">
            <p>三体：死神永生</p>
            <p>刘慈心</p>
            <div class="imgs">
                <img src="./assets/images/explore-tp_01.png">
                <img src="./assets/images/explore-tp_02.png">
                <img src="./assets/images/explore-tp_03.png">
                <img src="./assets/images/explore-tp_04.png">
            </div>
            <p>457人已订阅</p>
        </div>
        <div class="sidebox">
            <div class="side">
                <img src="./assets/images/explore-tp_05.png">
                <div class="text">
                    <p>陈小东</p>
                    <p>推荐</p>
                </div>
            </div>
        </div>
    </div>

    <div class="footbox"></div>


    <footer class="footer">
        <input type="radio" name="image1" id="list1" >
        <label for="list1" class="a1">
            <a  href="index.html" class="item1">
                <div class="img1"></div>
            </a>
        </label>
        <input type="radio" name="image1" id="list2" checked>
        <label for="list2" class="a2">
            <a href="javascript:void(0)" class="item2">
                <div class="img2"></div>
            </a>
        </label>
        <input type="radio" name="image1" id="list3">
        <label for="list3" class="a3">
            <a href="bookrack.html" class="item3">
                <div class="img3"></div>
            </a>
        </label>
        <input type="radio" name="image1" id="list4">
        <label for="list4" class="a4">
            <a href="mine.html" class="item4">
                <div class="img4"></div>
            </a>
        </label>
            
    </footer>
</body>
</html>
<script src="./assets/js/jquery.min.js"></script>

<script src="./assets/js/bootstrap.min.js"></script>

<script src="./assets/js/less.min.js"></script>

<script src="./assets/js/wow.min.repeat.js"></script>
<script>

    $("#dan").click(function(){
        $(".boxe1").fadeIn(800);
        $(".boxe").fadeOut(400);
 
        
    })

    $("#duo").click(function(){

        $(".boxe").fadeIn(800);
        $(".boxe1").fadeOut(400);
    })

</script>